@import 'mo/style/common';

$treenode-height: 22px;

#{$tree} {
    font-size: 13px;

    &__treenode {
        align-items: center;
        cursor: pointer;
        display: flex;
        height: $treenode-height;
        line-height: $treenode-height;
        outline: 1px solid transparent;
        outline-offset: -1px;
        padding-left: 10px;
        user-select: none;

        &:not(#{$tree}__treenode--active):hover {
            background-color: var(--list-hoverBackground);
        }

        &:focus {
            background-color: var(--list-activeSelectionBackground);
            color: #fff;
            outline-color: var(--list-focusOutline);
        }

        &__title {
            margin-left: 5px;
            width: 100%;
        }

        &--active,
        &.drag-over {
            background-color: var(--list-inactiveSelectionBackground);
        }
    }

    &__indent {
        display: flex;
        height: 100%;
        margin-right: 2px;

        &__guide {
            border-left: 1px solid var(--tree-indentGuidesStroke);
            display: inline-block;
            height: 100%;
            margin-left: 7px;
        }
    }
}
